<template>
    <div class="user-view">
       <div class="my-table">
        <table>
            <tr>
                <th class="box-shadow">序号</th>
                <th class="box-shadow">ID</th>
                <th class="box-shadow">用户名</th>
                <th class="box-shadow">头像</th>
                <th class="box-shadow">账号</th>
                <th class="box-shadow">密码</th>
                <th class="box-shadow">手机号</th>
                <th class="box-shadow">真实姓名</th>
                <th class="box-shadow">身份证</th>
                <th class="box-shadow">推荐人ID</th>
                <th class="box-shadow">创建时间</th>
            </tr>
            <tr v-for="(row, i) in adminList">
                <td class="box-shadow">{{ i }}</td>
                <td class="box-shadow">{{ row.id }}</td>
                <td class="box-shadow">{{ row.name }}</td>
                <td class="box-shadow color-blue" @click="showImage(row.image)">查看</td>
                <td class="box-shadow">{{ row.account }}</td>
                <td class="box-shadow">{{ row.password }}</td>
                <td class="box-shadow">{{ row.phone }}</td>
                <td class="box-shadow">{{ row.real_name }}</td>
                <td class="box-shadow">{{ row.id_card }}</td>
                <td class="box-shadow">{{ row.recommended_user }}</td>
                <td class="box-shadow">{{ row.create_time }}</td>
            </tr>
        </table>
       </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createAdmin, findAdmin, findList, activeAdmin, disactiveAdmin, updateAdmin } from '../../api/admin'
let adminList = ref([])
let searchCondition = ref({
    page: 1,
    limit: 10,
    total: 10
})
const getUserList = ()=>{
    findList(searchCondition.value).then(res=> {
        adminList.value = res.data.list
        searchCondition.value.total = res.data.total
    })
}

const init = ()=> {
    getUserList()
}

const showImage = (image)=> {
    window.open(image ,"_blank")
}

onMounted(()=> {
    init()
})
</script>

<style scoped>
.user-view {
    width: 100%;
    height:100%;
    background: #fff;
    padding: 8px;
    border-radius: 4px;
}
.my-table {
    width: calc(100% - 24px);
    text-align: center;
    padding: 2px;
    overflow: auto;
}
.my-table table { 
    padding: 4px;
    background: #fff;
    border-radius: 4px;
 }
.my-table th {
    padding: 4px 8px;
    background: #f18f8f;
    border-radius: 6px;
}
.my-table td {
    padding: 4px 8px;
    cursor: pointer;
    background: #e7dddd;
    border-radius: 6px;
}
.my-table td:hover {
    background: #c5bbbb;
    font-weight: bold;
    border-radius: 6px;
}
.my-table .table-image {
    max-width: 100px;
    max-height: 30px;
    margin-top: 4px;
}
</style>